Introduction

The Spider Writer Image Mapper aids in creating and editing client-side image maps. To get you immediately on your way into using the software, please take a few minutes to read this help file to give yourself a good idea of what the system can do.

To quickly acquaint yourself with the design of the program, please look at Menu/Toolbar Commands, and Importing and Exporting Image Maps topics. To get started modifying image maps and areas, see the Modifying Image Map Properties, Drawing an Area, Moving and Resizing Areas, and Modifying Area Properties topics.

TIP: Hover the mouse over an area and a tooltip will display the area's HREF.

Contacting the Spider Writer Support Staff

The creators of Spider Writer have worked hard to provide a very complete editing system to meet the needs of today's web developers. If you have any comments or suggestions about this software, please send them to suggestions@spiderwriter.com. Your input is greatly appreciated. For more information about the Spider Writer suite or for the latest updates, visit our web site at http://www.spiderwriter.com. Thank you for your support!

Legal Notices

Spider Writer is a trademark of Actipro Software LLP and is protected by copyright laws.


Menu and Toolbar Commands

The following table describes the menu and toolbar commands and lists their shortcut keys, if any.

Command | Description | Shortcut
New Image Map | Creates a new image map | CTRL+N
Open Image Map | Opens an existing .MAP file for editing | CTRL+O
Save Image Map | Saves the current image map | CTRL+S
Map Properties | Displays the Map Properties dialog | CTRL+P
Resize Image | Allows you to resize the image |
Copy Image Map to Clipboard | Copies the image map to the Clipboard | CTRL+C
Paste Areas from Clipboard | Pastes image map data from the Clipboard | CTRL+V
View Image Map Source | Displays the current image map output |
Delete Area | Deletes the currently selected area | Del
Area Properties | Flag setting whether Area Properties are visible |
Pointer | Sets the pointer tool |
Rectangle | Sets the rectangle tool |
Circle | Sets the circle tool |
Polygon | Sets the polygon tool |
Zoom | Zoom |
Settings | Opens the Settings dialog |
Help Topics | Displays this help file | F1
About Spider Writer Image Mapper | Displays program information |


Settings

The Settings dialog is available from the Tools menu. The Settings dialog allows you to configure the Spider Writer Image Mapper more to your liking. You can choose to output image map source as uppercase or lowercase. You can also choose the colors associated with:

  • Unselected Shapes
  • Highlighted Shapes
  • Selected Shapes
  • Shapes Being Drawn


Importing and Exporting Image Maps

Importing Image Maps

There are many ways to load an existing image map. If the image map is stored in a .MAP file, you can open it with the Open Image Map command. You can also import image maps from other applications, such as Spider Writer, by doing the following:

  1. Highlight the image map source (MAP and AREA tags) in Spider Writer
  2. Copy it to the clipboard
  3. Switch focus to the Image Mapper application
  4. Execute the Paste command

This procedure will load the image map into the Image Mapper.

Exporting Image Maps

You can save your image map to a .MAP file by executing the Save command from the File menu. To export your image map to another application, such as Spider Writer, perform the following steps:

  1. Execute the Copy command
  2. Switch focus to the Spider Writer application
  3. Paste the image map source into the application


Modifying Image Map Properties

The Image Map Properties dialog appears when you first start the Image Mapper and can be opened at any time from the toolbar or the File menu. This dialog allows you to set the attributes of the MAP tag which will surround the areas you draw when the image map is saved. You can set the NAME, CLASS, ID, and STYLE properties of the MAP tag.

The Image Map Properties dialog also lets you specify a background image to use while creating the image map. Simply enter the name of the file in the entry field or use the Browse button to locate the file. Once loaded, you can resize the image by calling the Resize Image dialog.


Resizing the Background Image

To resize the background image, press the Resize Image button on the toolbar or select the Resize Image command from the File menu. The Resize Image dialog which appears allows you to set the new image width and height.


Zoom

The zoom function zooms the image and all areas in by two times. This is useful for making more precise image maps. The zoom command is found on the Tools menu.


Drawing an Area

Creating new areas is very easy. The drawing of the area is done in the main workspace. The Image Mapper can create rectangle, circle, and polygon areas of any size. After an area is drawn, it will appear in the workspace as well as in the Area List.

Selecting a Drawing Tool

The first step in creating an area is selecting the type of area you are going to draw. Select either the rectangle, circle, or polygon tool from the toolbar or from the Tools menu.

Drawing a Rectangle or Circle Area

To draw a rectangle or circle, make sure the appropriate tool is selected. Then move the mouse cursor into the workspace and press the left mouse down to set the first corner coordinate of the area. While keeping the mouse button depressed, drag the mouse to set the size of the area. A temporary shape will be drawn showing the current size. When you are satisfied with the size, release the mouse button and the area will be created.

Drawing a Polygon Area

To draw a polygon, make sure the polygon tool is selected. Polygons require three or more points. Left click in the workspace to set the first point at a desired location. Move the mouse to where the second point should go and left click again. Move the mouse to where the third point should go and left click again. Once three points have been set, you can continue to add points by following the same method or you can right click to close the polygon.


Moving and Resizing Areas

Moving an Area

To move an area, move the mouse over the area. It should become highlighted, showing that the mouse is currently over it. To move the area, press the left mouse button down and drag the area to the desired location. Release the mouse button to set its new position.

Resizing Rectangle and Circle Areas

After a rectangle or circle area has been drawn, it will appear with small rectangle handles surrounding it. To resize the area, press the left mouse button down over a handle and drag the handle. The new size of the area will be displayed as you drag. To set a size, release the mouse button.

Resizing Polygon Areas

After a polygon area has been drawn, handles will appear at all of its vertices. To move a vertex, press the left mouse button down over a handle and drag the handle. To set the new position of the vertex, release the mouse button.


Modifying Area Properties

The properties of an area are displayed in a grid on the right side of the window. If they are not visible, you can make them appear by checking the Show/Hide Area Properties toolbar button.

Selecting an Area to Modify its Properties

To select an area so that you can modify its properties, click on it either in the workspace or in the Area List. Its property values will appear in the Area Properties grid.

Changing a Property Value

To change a property value, click on the property value on the right side of the grid and type in the new value. You can use the scrollbar to scroll up and down the property list. Note that as you highlight different properties, a brief description of the property is displayed below the grid. Some property types have dropdown buttons and allow you to select values from a default list. URL-type properties let you select from a list of recently used URLs or select a file. Note that the COORDS and SHAPE properties cannot be modified directly from the Area Properties grid.


Deleting an Area

To delete an area, select it by either clicking on it in the workspace or by clicking on it in the Area List. Then select the Delete toolbar button or menu command. You can also right click on an area in the workspace to bring up a context menu with the Delete Area command on it.